// 头部定位的颜色控制
// 获取header和logo图片
const header = document.querySelector('#header')
const logosvg = document.querySelector('.logo-svg')
document.addEventListener('scroll', function () {
   // offsetTop为元素到视口顶部的距离
   if (header.offsetTop > 2) {
      header.classList.add('header-sticky')
      logosvg.innerHTML = '<img src="./svg/musician-logo-fff.svg">'
   }
   if (header.offsetTop < 2) {
      header.classList.remove('header-sticky')
      logosvg.innerHTML = '<img src="./svg/musician-logo-000.svg">'
   }
})



// 中间内容部分的盒子黏性定位效果控制
// 获取黏性定位的内容盒子——类名item5-contentBox
const sticky = document.querySelector('.item5-contentBox')

// 获取每一个圆圈(得到的是一个数组)
const cirs = document.querySelectorAll('.cir')

// 获取每一个头像(得到的是一个数组)
const fans = document.querySelectorAll('.fans')

// 获取手机
const phone = document.querySelector('.phone')

// 获取圆圈、头像、手机盒子(得到的是一个数组)
const commons = document.querySelectorAll('.common')


document.addEventListener('scroll', function () {
   // 将到屏幕的距离赋值给常量，方便使用
   const range = sticky.offsetTop
   console.log(range)

   // 循环遍历
   // 通过识别距离区间，设置不同的类名，由类名来控制缩放
   for (let i = 0; i < cirs.length; i++) {
      if (range < 2660) {
         cirs[i].className = `cir cir${i+1}`
         fans[i].className = `fans fans${i+1}`
         commons[0].className = `phonebox circular fansbox common`
         commons[1].className = `phonebox circular fansbox common`
         commons[2].className = `phonebox circular fansbox common`
         phone.className = 'phone'
      } else if (range > 2660 && range < 2860) {
         cirs[i].classList.add(`cir${i+1}-1`)
         fans[i].classList.add(`fans${i+1}-1`)
         commons[0].classList.add('common1')
         commons[1].classList.add('common1')
         commons[2].classList.add('common1')
         phone.classList.add(`phone-1`)
      } else if (range > 2860 && range < 3060) {
         cirs[i].classList.add(`cir${i+1}-2`)
         fans[i].classList.add(`fans${i+1}-2`)
         commons[0].classList.add('common2')
         commons[1].classList.add('common2')
         commons[2].classList.add('common2')
         phone.classList.add(`phone-2`)
      } else if (range > 3060 && range < 3260) {
         cirs[i].classList.add(`cir${i+1}-3`)
         fans[i].classList.add(`fans${i+1}-3`)
         phone.classList.add(`phone-3`)
      } else if (range > 3260 && range < 3460) {
         cirs[i].classList.add(`cir${i+1}-4`)
         fans[i].classList.add(`fans${i+1}-4`)
         phone.classList.add(`phone-4`)
      } else if (range > 3460 && range < 3660) {
         cirs[i].classList.add(`cir${i+1}-5`)
         fans[i].classList.add(`fans${i+1}-5`)
         phone.classList.add(`phone-5`)
      } else if (range > 3660 && range < 3860) {
         cirs[i].classList.add(`cir${i+1}-6`)
         fans[i].classList.add(`fans${i+1}-6`)
         phone.classList.add(`phone-6`)
      }
   }
})





// 改变推广部分的背景图
const items = document.querySelectorAll('.item6-items .left')
for (let i = 0; i < items.length; i++) {
   items[i].style.backgroundImage = `url(../images/musician-Profit-0${i+1}.png)`
}



// 改变轮播图tab栏背景图
const is = document.querySelectorAll('.tabI')
for (let i = 0; i < is.length - 1; i++) {
   is[i].style.backgroundImage = `url(./images/musician-banner${i+1}.png)`
}

// 定时器切换tab标签
let index = 0
const id = setInterval(function () {
   tab(index)
   bann(index)
   index++
   if (index >= is.length) {
      index = 0
   }
}, 1500)

// 函数进行tan栏active类名的增删
function tab(m) {
   document.querySelector('.tabI.active').classList.remove('active')
   is[m].classList.add('active')
}

// 获取轮播图
const bans = document.querySelectorAll('.ban')

// 获取轮播图tab栏
const tabUl = document.querySelector('.tab-top')
console.log(tabUl)
// 点击切换
tabUl.addEventListener('click', function (e) {
   const inVal = e.target
   if (inVal.tagName === 'I') {
      console.log(inVal)
      const inValue = inVal.dataset.i
      index = inValue
      console.log(index)
      tab(index)
      bann(index)

      // document.querySelector('.ban.active').classList.remove('active')
      // bans[index].classList.add('active')
   }
})


// 函数进行active类名的增删
function bann(m) {
   document.querySelector('.ban.active').classList.remove('active')
   bans[m].classList.add('active')
}